<template>
    <div id="errorImg">
        <article>
            <p>
                开发时经常遇到后台返回数据时返回的图片连接是null，或者图片链接是一个不可用的链接。此时为了界面美化，就需要添加一张默认图片来填充空缺位置。在此统一封装一个图片标签。
            </p>
            <p>
                总体思路就是利用图片onerror事件更换加载不出来的图片
            </p>

            将<img src="errorImg.png" alt="错误图片" class="example">替换成<img src="../components/imgTag/errorImg.png" alt="" class="example">
            <ul>
                <li>
                    <p>当自定义的组件在挂在的时候定义onerror属性</p>
                    <code>
                        mounted() {
                            this.$refs.img.onerror = () => {
                                this.imageSrc = this.srcFallback
                            }
                        }
                    </code>
                </li>


                <li>
                    <code>
                        &lt;img :src="src" :title="title" :onerror="errorImg"&gt;
                    </code>
                    在data里面定义
                    <code>
                        errorImg: 'this.src="' + require("./errorImg.png") + '"',
                    </code>
                </li>
            </ul>
        </article>

        <section>
            <imgTag class="result" v-for="(item,index) in imgData" :key="index" :src="item.src" :title="item.title"></imgTag>
        </section>
    </div>
</template>
<script>
    import imgTag from '../components/imgTag/imgTag'
    export default {
        name: "",
        components: {
            imgTag,
        },
        data() {
            return {
                imgData: [{
                    src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542556066563&di=a8c4bef4413cdb052c4f5876f12376ec&imgtype=0&src=http%3A%2F%2Fs6.cdn.deahu.com%2Fshow%2Flfile%2F8E9CDE37D4E5AFBFEB9A6FB2CC594187.jpg",
                    title: "远程可用图片",
                }, {
                    src: "https://timgsa.baidu.com",
                    title: "远程不可用图片",
                }, ]
            };
        }
    };
</script>
<style scoped>
    .example {
        width: 100px;
        height: 100px;
    }

    .result {
        width: 200px;
        height: 200px;
    }
</style>